<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录界面</title>
    <div th:include="user-common::css"></div>
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link th:href="@{/css/login.css}" rel="stylesheet">

</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">

    <div class="layui-header">
        <a href=""><img th:src="@{/assets/images/mashup-icon.svg}" class="navbar-logo-img" alt="">
            <div class="layui-logo">鸿发国际酒店</div>
        </a>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a th:href="@{/room/toList}">预定房间</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <i class="layui-icon layui-icon-friends" style="font-size: 25px;"></i>
                请登录
            </li>
        </ul>
    </div>

    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md-offset4 layui-col-md4" style="margin-top: 30px;margin-bottom: 50px;">

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;"></fieldset>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
                    <legend style="color: red;">[[${loginError}]]</legend>
                    <legend style="color: red;">[[${msg}]]</legend>
                </fieldset>

                <form name="login" class="layui-form" th:action="@{/user/login}" method="post">
                    <h1 class="layui-input-block">欢 迎 登 录</h1>
                    <label class="layui-form-label" style="text-align: left;padding: 4px 5px;">用户名:</label>
                    <div class="layui-form-item">
                        <input id="name" type="text" class="layui-input" name="name" lay-verify="required"
                               lay-reqtext="用户名不能为空！" placeholder="请输入用户名"/>
                    </div>
                    <label class="layui-form-label" style="text-align: left;padding: 4px 5px;">密 码:</label>
                    <div class="layui-form-item">
                        <input id="password" type="password" class="layui-input" name="password"
                               lay-verify="required|pass" lay-reqtext="密码不能为空！" placeholder="请输入密码"/>
                    </div>

                    <div class="layui-form-item" pane="">
                        <div class="layui-input-block" style="margin-left: 0;">
<!--                            <input type="hidden" id="hid" name="isMemory" value="off"/>-->
                            <input id="isMemory" type="checkbox" name="isMemory" lay-skin="primary" title="记住我"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">登录</button>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <div class="layui-btn-group">
                                <a th:href="@{/user/toReg}" class="layui-btn layui-btn-normal">注册</a>
                                <button type="reset" class="layui-btn layui-btn-primary"
                                        onclick="return confirm('您确定要重置吗？');">重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"></fieldset>

            </div>
        </div>
    </div>

</div>


<div th:include="user-common::js"></div>

<script>
    //cookie
    var allcookies = document.cookie;
    console.log("allcookies:::" + allcookies);
    var arrstr = document.cookie.split(";");
    console.log("arrstr:::" + arrstr);
    // cookie值是这样的->  account=xxxx;password=xxxx
    for (var i = 0; i < arrstr.length; i++) {
        var temp = arrstr[i].split("=");
        console.log("temp:::" + temp);
        console.log("temp[0]:::" + temp[0]);
        console.log("temp[1]:::" + temp[1]);

        if (temp[0] == "userName") {
            console.log(temp[1]);
            document.getElementById("name").value = temp[1];
        }
        //第二个cookie开头会有空格注意
        if (temp[0] == " userPassword") {
            console.log(temp[1]);
            document.getElementById("password").value = temp[1];
        }
        if (temp[0] === " memoryCheck"){
            console.log(temp[1]);
            document.getElementById("isMemory").value = temp[1];
            var isMem = document.getElementById("isMemory");
            isMem.checked = "checked";
            // isMem.value = "on";
        }
    }


    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });

    //样式
    layui.use(['form'], function () {
        var form = layui.form;

        //自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格!'
            ]
        });

        //监听提交
        form.on('submit(formDemo)', function () {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return true;
        });
    });

</script>

</body>
</html>
